<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-bind使用</title>
  <style>
    img {
      width: 100px;
      height: 100px;
    }

    .red {
      color: red
    }

    .blue {
      color: blue
    }
  </style>
</head>

<body>
  <!-- 用于响应式地更新 HTML attributes
例如：id  src  href  class  style... -->
  <div id="app">
    <!-- 静态 -->
    <p> <img
        src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/95eef01f3a292df56cfa9214bc315c6034a873f1.jpg" />
    </p>
    <p>
      <!-- 动态绑定 -->
      <img v-bind:src="src1" />
    </p>
    <ul>
      <li><a class="red" href="http://www.baidu.com">百度</a></li>
      <li><a v-bind:class="cla" :href="href">QQ</a></li>
      <li><a :class="cla" v-bind:href="href">QQ2</a></li>
    </ul>


  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        src1: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201901%2F17%2F20190117092809_ffwKZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613094110&t=346838eeacb1e09f6c059c37e42e584c',
        href: 'http://qq.com',
        cla: 'red'
      }
    })
  </script>
</body>

</html>